<template>
  <div id="app">
    <div class="detach">
      <div class="info">
        <span v-if="userInfo.displayName">{{ userInfo.displayName }}</span>
        <span v-if="!userInfo.displayName">召唤师XXX</span>
      </div>
      <div class="handle-container">
        <div class="window-handle">
          <div class="minimize" @click="minimize">
            <img src="./assets/minimize.svg" style="
              width: 20px;
              height: 20px;
              -webkit-user-drag: none;
              margin-top: 20px;
      " />
          </div>
          <div class="info_v" @click="toInfo">
            <img src="./assets/info_v.svg" style="
              width: 20px;
              height: 20px;
              -webkit-user-drag: none;
              margin-top: 20px;
      " />
          </div>
          <div class="close" @click="close">
            <img src="./assets/close.svg" style="
              width: 20px;
              height: 20px;
              -webkit-user-drag: none;
              margin-top: 20px;
      " />
          </div>
        </div>
      </div>
    </div>
    <router-view style="height: 460px;" />
    <div class="status-bar">
      客户端状态:{{ clientState }}
    </div>
  </div>
</template>

<script>
const { ipcRenderer } = window.require('electron')
import { executeCommand } from "./util";
import { portRegex, passwordRegex } from "./util/regex";
import axios from 'axios'
const Base64 = require('js-base64').Base64
// import { Howl, Howler } from 'howler';
const { Howl, Howler } = require('howler');
import { mapMutations, mapGetters } from "vuex";
export default {
  name: 'App',
  data() {
    return {
      // 客户端连接状态
      clientState: '',
      // 用户状态
      userState: '',
      userInfo: {}
    }
  },
  components: {
  },
  mounted() {

  },
  created() {
    // 获取LOL密钥
    this.authInfo()
    // this.reload()
    this.receiveMessage()
    this.playMusic()

  },
  methods: {
    ...mapGetters(['getStoreClientState', 'getStoreUserInfo', 'getStoreUserState', 'getStoreReadyValue', 'getStoreRoleValue']),
    ...mapMutations(['setStoreClientState', 'setStoreUserInfo', 'setStoreUserState']),
    playMusic() {
      let sounds = new Howl({
        src: [require("../empty_loop_for_js_performance.wav")],
        volume: 0.1,
        autoplay: true, loop: true,
      });
      if (sounds.empty) return sounds.empty.play();
      sounds.empty = new Howl({
        src: [require("../empty_loop_for_js_performance.wav")],
        volume: 0.1,
        autoplay: true, loop: true,
      });
    },
    receiveMessage() {
      ipcRenderer.on('main-renderer', async (event, arg) => {
        console.log(arg);
      });
    },
    minimize() {
      ipcRenderer.send('detach:service', { type: 'minimize' });
    },
    // maximize() {
    //   ipcRenderer.send('detach:service', { type: 'maximize' });
    // },
    toInfo() {
      this.$router.push('/info_v');
    },
    close() {
      ipcRenderer.send('detach:service', { type: 'close' });
    },
    // 获取LOL密钥
    async authInfo() {
      const rawStdout = await executeCommand(
        "wmic PROCESS WHERE name='LeagueClientUx.exe' GET commandline /value  | find /v \"\""
      );
      if (rawStdout != null) {
        this.clientState = '在线'
        this.setStoreClientState(this.clientState)
        console.log(this.clientState);
        const stdout = rawStdout.replace(/\n|\r/g, "");
        const [, port] = stdout.match(portRegex)
        const [, password] = stdout.match(passwordRegex)
        // const [, pid] = stdout.match(pidRegex)
        const token = Base64.encode('riot:' + password)
        console.log(port);
        console.log(password);
        console.log(token);
        await axios({
          method: 'get',
          url: 'http://127.0.0.1:9133/sendRotData',
          params: {
            port: port,
            token: token
          }
        })
        this.getUserInfo()
        this.getUserState()
      } else {
        this.clientState = '离线'
        this.setStoreClientState(this.clientState)
        this.userState = 'offline'
        this.setStoreUserState(this.userState)
        this.userInfo = {}
        console.log('未运行客户端!');
        setTimeout(() => {
          this.authInfo()
        }, 5000);
      }
    },
    // 获取玩家信息
    async getUserInfo() {
      const res = await axios({
        method: 'get',
        url: 'http://127.0.0.1:9133/getUserInfo',
      })
      if (res.data.displayName) {
        this.userInfo = res.data
        this.setStoreUserInfo(res.data)
        console.log(this.userInfo);
      } else {
        console.log('未获取');
        setTimeout(() => {
          this.getUserInfo()
        }, 2000);
      }
    },
    // 获取玩家目前状态
    async getUserState() {
      let timer = setTimeout(() => {
        this.getUserState()
      }, 1000);
      const res = await axios({
        method: 'get',
        url: 'http://127.0.0.1:9133/getUserState',
      })
      console.log(res.data);
      this.setStoreUserState(res.data)
      switch (res.data) {
        // 查找到对局
        case 'ReadyCheck':
          if (this.getStoreReadyValue()) {
            const res_1 = await axios({
              method: 'get',
              url: 'http://127.0.0.1:9133/postaccept',
            })
            console.log(res_1);
          }
          break;
        // 正在选择英雄状态
        case 'ChampSelect':
          if (this.getStoreRoleValue() !== -1) {
            const res = await axios({
              method: 'get',
              url: 'http://127.0.0.1:9133/getActionId'
            })
            console.log(res.data.actions);
            // 获取位置
            const actionId = res.data.localPlayerCellId
            console.log(actionId);
            let id = this.getStoreRoleValue()
            // const res =
            const res1 = await axios({
              method: 'get',
              url: 'http://127.0.0.1:9133/patchrole',
              params: {
                actionId: actionId,
                championId: id,
                type: 'pick'
              }
            })
            console.log(res1);
            if (res1) {
              await axios({
                method: 'get',
                url: 'http://127.0.0.1:9133/postrole',
                params: {
                  actionId: actionId,
                  championId: id,
                  type: 'pick'
                }
              })
            }
          }
          break
        // 额外添加的状态,后端发送请求错误时返回offline
        case 'offline':
          clearTimeout(timer)
          this.authInfo()
          break;
      }
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, "PingFang SC", "Helvetica Neue", "Microsoft Yahei", sans-serif;
  user-select: none;
  overflow: hidden;
}

/* 标题栏 */
.detach {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  color: black;
  /* background-color: black; */
  border-bottom: 1px solid #ccc;
}

.detach {
  /* flex: 1; */
  display: flex;
  align-items: center;
  font-size: 18px;
  padding-left: 10px;
  font-weight: 500;
  box-sizing: border-box;
  justify-content: space-between;
}

.window-handle {
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

.detach {
  -webkit-app-region: drag;
}



.detach .info {
  display: flex;
  align-items: center;
}

.window-handle {
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

.window-handle>div {
  width: 60px;
  height: 60px;
  cursor: pointer;
  /* border-radius: 10px; */
}

/* .window-handle>div:hover {
  background-color: #a8a8a8
} */

.window-handle .minimize:hover {
  background-color: #dfe6e9
}

.window-handle .info_v:hover {
  background-color: #ffeaa7
}


.window-handle .close:hover {
  background-color: #e53935 !important;
  border-radius: 0 10px 0 0;
}

/* 底部状态栏 */
.status-bar {
  display: flex;
  flex-direction: row-reverse;
  height: 30px;
  padding-right: 30px;
  color: #fff;
  background-color: #ccc;
  border-radius: 0px 0 10px 10px;
}
</style>
